<!DOCTYPE html>
<html class="ui-page-login">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>login</title>
    <link href="/css/mui.min.css" rel="stylesheet" />
    <link href="/css/style.css" rel="stylesheet" />
    @notifyCss
    @notifyJs
    <style>
        .mui-input-group {
            margin: 10px 5px 10px 5px;
        }

        .mui-input-group:first-child {
            margin-top: 20px;
        }

    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">快速登录</h1>
    </header>
    <div class="mui-content">
        <form id="login-form" action="/login_captcha" method='post' class="mui-input-group">
            @csrf
            <div class="mui-content">
                @include('notify::messages')
                <x:notify-messages />
                @notifyJs
                <div class="mui-row">
                    <div class="mui-col-sm-12 mui-col-xs-12">
                        <input id="phone" name="phone" type="text" class="mui-input-clear mui-input" placeholder="请输入手机号">
                    </div>
                </div>
                <div class="mui-row">
                    <div class="mui-col-sm-7 mui-col-xs-7">
                        <input type="text" name="captcha" class="mui-input-clear mui-input" placeholder="请输入图形验证码">
                    </div>
                    <div class="mui-col-sm-5 mui-col-xs-5" onclick="changeCaptchaImg(this)">
                        {!! captcha_img() !!}
                    </div>
                </div>
            </div>
            <div class="mui-content-padded">
                <button id="submit" class="mui-btn mui-btn-block mui-btn-primary">获取短信验证码</button>
            </div>
        </form>
    </div>
    <script src="/js/mui.min.js"></script>
    <script src="/js/mui.enterfocus.js"></script>
    <script src="/js/app.js"></script>
    <script>
        mui.init({
            swipeBack: true
        });
        mui('body').on('#submit', function(){
            document.getElementByID('login-form').submit();
        });

        function changeCaptchaImg(obj) {
            var img = obj.children;
            img = img[0];
            img.setAttribute('src',img.getAttribute('src')+'a');
            console.log(img);
        }


    </script>
</body>

</html>
